<template>
  <div>
    <a-modal
      width="50%"
      v-model="visible"
      title="异常报告"
      centered
      @ok="() => (visible = false)"
    >
      <a-row>
        <a-col span="24" style="text-align: right;margin-bottom: 20px">
          <a-button @click="exportXlsBtn('管网压力')" type="primary"
                    style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;">导出
          </a-button>
        </a-col>
      </a-row>
      <a-table :pagination="false" :rowKey="(record,index)=>{return index}" style="display:block;"
               :data-source="list" bordered :columns="columns">
             <span slot="indexRender" slot-scope="record, index, indent, expanded">
                {{ indent + 1 }}
         </span>
        <span slot="status" slot-scope="record, index, indent, expanded">
                        {{ indent == 1 ? '正常' : '异常' }}
                 </span>
      </a-table>
      <div style="text-align: right;margin-top: 30px">
        <a-pagination @change="onShowSizeChange" v-model="pageNo" :total="total" show-less-items/>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {abnormalList} from "@api/device";
import {exportXls} from "@api/meteorological";

export default {
  data() {
    return {
      visible: false,
      // 表头
      columns: [
        {
          title: '序号',
          width: 80,
          scopedSlots: {customRender: 'indexRender'}
        },
        {
          title: '名称',
          dataIndex: 'deviceName',
        },
        {
          title: '压力（mpa）',
          dataIndex: 'numVal',
        },
        {
          title: '阈值范围',
          dataIndex: 'threshold',
        },
        {
          title: '预警状态',
          scopedSlots: {customRender: 'status'}
        },
        {
          title: '上报时间',
          dataIndex: 'createDate',
        },
      ],
      list: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      exportUrl: '/fabr/fabrPipeNetwork/exportXls',
    };
  },
  methods: {
    exportXlsBtn(message) {
      exportXls(this.exportUrl).then(res => {
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const urls = window.URL.createObjectURL(blob)
        const a = document.createElement('a') // 生成虚拟a标签
        a.href = urls
        a.download = message + '.xls'
        a.click()
        document.body.removeChild(a) // 下载完成移除元素
        window.URL.revokeObjectURL(urls) // 释放掉blob对象
      }).catch(err => {

      })
    },
    dataList(pageSize,pageNo) {
      abnormalList(pageSize,pageNo).then(res => {
        console.log(res)
        this.list = res.result.records
        this.total = res.result.total
      }).catch(err => {

      })
    },
    onShowSizeChange(current, pageSize) {
      this.dataList(pageSize, current)
    },
  }
}
</script>

<style scoped>

</style>